<template>
	<view class="content">
		<view class="head_ic">
			<view class="">
				<uni-icons @click="iconFn" type="bars" size="36"></uni-icons>
			</view>
			<uni-icons @click="createAGroup" type="plusempty" size="36"></uni-icons>
		</view>
		<image class="img" src="@/static/logoa.png" mode=""></image>
		<view class="text_b">
			监测实时降雨&ensp;查询历史雨量
		</view>
		<view class="text-area">
			<view class="box" hover-class="hvbox" @click="rainfallStationFn">
				自计雨量站
			</view>
			<view class="box" hover-class="hvbox" @click="artificialRainMeasuringStationFn">
				人工雨量站
			</view>
		</view>
		<view class="text-area">
			<view class="box" hover-class="hvbox" @click="mapsFn">
				雨量站地图
			</view>
			<view class="box" hover-class="hvbox" @click="rainfallStatisticsFn">
				降雨量统计
			</view>
		</view>
		<view class="text-arebb">
			<view class="box" hover-class="hvbox" @click="localWeatherFn">
				查看天气
			</view>
			<view class="box" hover-class="hvbox" @click="connectedBelFN">
				连接终端
			</view>
		</view>
		<!-- 		<view class="text-arc">
			<view class="box" hover-class="hvbox" @click="viewVersion">
				版本升级
			</view>
		</view> -->
		<view class="textflx" style="margin-top: 20rpx;font-size: 35rpx;color: #000;">
			石津灌区综合业务平台雨量监测APP
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showToasttet: '',
				longitude: '',
				latitude: '',

			}
		},
		onLoad() {
			this.lotlatFn()
		},
		methods: {
			// 创建雨量站分组
			createAGroup() {
				uni.navigateTo({
					url: '/pages/index/managementOffice?name=' + '创建'
				});
			},
			// 经纬度 降雨量统计
			lotlatFn() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.longitude = res.longitude
						this.latitude = res.latitude
						console.log('地区：' + res.address);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});

			},
			// 功能
			iconFn() {
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/feature/index'
				});
			},
			// 查看版本
			viewVersion() {
				uni.navigateTo({
					url: '/pages/index/renewal'
				});
			},
			// 自计雨量站
			rainfallStationFn() {
				// uni.navigateTo({
				// 	url: '/pages/index/managementOffice?name=' + '自计'
				// });
				uni.navigateTo({
					url: '/pages/index/rainfallStation?id=' + ''
				});
			},
			// 人工雨量站
			artificialRainMeasuringStationFn() {

				// uni.navigateTo({
				// 	url: '/pages/index/managementOffice?name=' + '人工'
				// });
				uni.navigateTo({
					url: '/pages/index/manualForecasting'
				});
			},
			// 雨量站地图
			mapsFn() {
				uni.navigateTo({
					url: '/pages/maps/index'
				});
			},
			// 降雨量统计
			rainfallStatisticsFn() {
				// uni.navigateTo({
				// 	url: '/pages/index/districtListHYETAL'
				// });
				uni.navigateTo({
					url: '/pages/index/rainfallStatistics'
				});
			},
			// 当地天气
			localWeatherFn() {
				let name = ''
				let lon = this.longitude
				let lat = this.latitude
				uni.navigateTo({
					url: '/pages/index/historicalData?name=' + name + '&lon=' + lon + '&lat=' + lat
				});
			},
			// 连接BEL 工具列表
			connectedBelFN() {
				uni.navigateTo({
					url: '/pages/index/toolList'
					// url: '/pages/index/setUp'
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	.head_ic {
		margin-top: 80rpx;
		padding: 0 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: #a9fd69;
	}

	.content {
		text-align: center;

		.img {
			width: 280rpx;
			height: 280rpx;
		}

		.text_b {
			font-size: 40rpx;
			color: #000000;
			line-height: 150rpx;
			// text-shadow: 0 0 1rpx #000;
		}

		.text-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #000;
			font-size: 50rpx;

			.box {
				width: 450rpx;
				padding: 20rpx;
				border: 5rpx solid #000000;
				border-radius: 30rpx;
				margin: 30rpx 0 0rpx 0;
				background-color: #add5f7;
			}

			.hvbox {
				background-color: #a9fd69;
			}
		}

		.text-arebb {
			width: 480rpx;
			position: fixed;
			bottom: 180rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			color: #000;
			font-size: 40rpx;

			.box {
				width: 180rpx;
				padding: 20rpx;
				border: 5rpx solid #000000;
				border-radius: 30rpx;
				margin: 150rpx 0 0rpx 0;
				background-color: #64dcc4;
			}

			.hvbox {
				background-color: #a9fd69;
			}
		}

		.text-arc {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #000;
			font-size: 30rpx;

			.box {
				width: 200rpx;
				padding: 20rpx;
				border: 5rpx solid #000000;
				border-radius: 30rpx;
				margin-top: 50rpx;
				background-color: #bde8ff;
			}

			.hvbox {
				background-color: #a9fd69;
			}
		}

	}

	.textflx {
		position: fixed;
		bottom: 80rpx;
		left: 0;
		right: 0;
	}
</style>
<style>
	page {
		background-color: #cde7ff;
	}
</style>